<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/cartStore';
import * as OrderAPIs from '@/apis/order'

const orderList = ref([])

// 获取订单列表
// 1待付款，2待发货，3待收货，4已完成
const getOrders = async (status) => {
    const res = await OrderAPIs.getOwnOrderAPI(status)
    if (res.code === 2000) {
        orderList.value = res.data
    }
}

const orderStatus = (status) => {
    if (status === 1) return '待付款'
    if (status === 2) return '代发货'
    if (status === 3) return '待收货'
    if (status === 4) return '已完成'
}

const type = ref(0)
const changeType = (val) => {
    type.value = val
    getOrders(val)
}

// 查看订单详情
let dialogVisible = ref(false)
const showOrder = ref({})
const detail = (i) => {
    dialogVisible.value = true
    showOrder.value = i
}

// 去付款
const cartStore = useCartStore()
const router = useRouter()
const goPay = (i) => {
    // console.log(i);
    cartStore.products = [i]
    cartStore.orderIdList = [i.ordersId]
    router.push({ path: '/order', query: {
        addressId: i.addressId
    } })
}

// 确定收货
const confirmReceipt = async (id) => {
    const res = await OrderAPIs.confirmOrderAPI(id)
    if (res.code === 2000) {
        getOrders(type.value)
        ElMessage({ type: 'success', message: '操作成功' })
    }
}

onMounted(() => getOrders(0))
</script>

<template>
<div class="order-page">
    <div class="order-title">我的订单</div>
    <div class="order-container">
        <div class="order-tabs">
                <div class ="tab-item" :class="{ active: type === 0 }" @click="changeType(0)">全部</div>
                <div class ="tab-item" :class="{ active: type === 1 }" @click="changeType(1)">待付款</div>
                <div class ="tab-item" :class="{ active: type === 2 }" @click="changeType(2)">待发货</div>
                <div class ="tab-item" :class="{ active: type === 3 }" @click="changeType(3)">待收货</div>
                <div class ="tab-item" :class="{ active: type === 4 }" @click="changeType(4)">已完成</div>
        </div>
        <table class="table">
            <thead style="background-color: #f2f2f2; margin-top: 20px; font-size: 14px; height: 50px;">
                <th width="300">商品</th>
                <th width="220">规格</th>
                <th width="90">数量</th>
                <th width="90">总价</th>
                <th width="120">状态</th>
                <th width="160">操作</th>
            </thead>
            <tbody>
                <tr v-for="i in orderList" :key="i.id">
                    <td class="good" style="height: 100px; width: 300px;">
                        <div class="image"><img :src="i.image"></div>
                        <div class="good-name"><p>{{ i.productName }}</p></div>
                    </td>
                    <td class="td"><p>{{ i.productSku }}</p></td>
                    <td class="td"><p>{{ i.number}}</p></td>
                    <td class="td"><p>&yen;{{ i.amount }}</p></td>
                    <td class="td">
                        <p style="color: #dc2f2f;" v-show="i.status === 1">待付款</p>
                        <p style="color: #e6a23c;" v-show="i.status === 2">待发货</p>
                        <p style="color: #e6a23c;" v-show="i.status === 3">待收货</p>
                        <p style="color: #45b035;" v-show="i.status === 4">已完成</p>
                    </td>
                    <td class="td">
                        <div class="opretion">
                            <a href="javascript:;" class="opretion-btn blue" style="margin-right: 10px" @click="detail(i)">详情</a>
                            <a href="javascript:;" class="opretion-btn green" v-if="i.status === 1" @click="goPay(i)">付款</a>
                            <el-popconfirm icon-color="#DC2F2F" title="确认收货吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="confirmReceipt(i.id)" v-if="i.status === 3">
                                <template #reference>
                                    <a href="javascript:;" class="opretion-btn green">收货</a>
                                </template>
                            </el-popconfirm>
                        </div>
                    </td>
                </tr>

                <tr v-if="orderList.length === 0">
                    <td colspan="6"><div class="order-none">
                        <el-empty description="订单列表为空">
                        </el-empty>
                    </div></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<el-dialog
    v-model="dialogVisible"
    title="订单详情"
    width="35%">
    <div class="dialog-content">

        <div>
            <div class="content-label">商品名称：</div>
            <div class="content-ipt"><input type="text" readonly="readonly" :value="showOrder.productName"></div>
        </div>
        <div>
            <div class="content-label">商品规格：</div>
            <div class="content-ipt"><input type="text" readonly="readonly" :value="showOrder.productSku"></div>
        </div>
        <div>
            <div class="content-label">订单号：</div>
            <div class="content-ipt"><input type="text" readonly="readonly" :value="showOrder.ordersId"></div>
        </div>
        <div>
            <div class="content-label">成交时间：</div>
            <div class="content-ipt"><input type="text" readonly="readonly" :value="showOrder.checkoutTime"></div>
        </div>
        <div>
            <div class="content-label">订单状态：</div>
            <div class="price-ipt"><input type="text" style="color: green;" :value="orderStatus(showOrder.status)"></div>
        </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <!-- <el-button type="primary" @click="dialogVisible = false">确定</el-button> -->
        </span>
    </template>
</el-dialog>

</template>

<style scoped lang='scss'>
.order-page {
    width: 100%;
    padding: 20px;
    min-height: 700px;
    background-color: #fff;
    font-size: 20px;

    .order-title {
        font-size: 21px;
        padding: 15px 0;
        border-bottom: 1px solid #e8e8e8;
    }

    p {
        font-size: 10px;
        text-align: center;
    }
    .order-container {
        width: 100%;

        .order-tabs {
            width: 100%;
            height: 44px;
            margin: 10px 0;
            margin-top: 20px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;

            .tab-item {
                height: 55px;
                font-size: 15px;
                padding: 17px 73px;
                color: #000000;
                text-align: center;
                cursor: pointer;
            }

            .active {
                color: #fff;
                background-color: #45b035;
            }
        }
        .table {
            margin-top: 5px;
            width: 100%;
        }
    }
}

.order-none {
    text-align: center;
    padding: 110px 0;
    background: #fff;
}
.good {
    display: flex;
    align-items: center;
    img {
        width: 100px;
        height: 100px;
    }
    .good-name {
        margin-left: 40px;
    }
}

.opretion {
    display: flex;
    justify-content: center;

    .opretion-btn {
        width: 50px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        font-weight: 400;
    }
}

.dialog-content {
    width: 100%;

    >div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .content-label {
        width: 90px;
        color: #666;
        font-weight: bold;
    }

    .content-ipt {
        width: 300px;
        height: 35px;
        border: 1.5px solid #d8d8d8;
        border-radius: 5px;

        input {
            width: 100%;
            height: 100%;
            font-size: 16px;
            padding: 0 10px;
            border-radius: 5px;
        }
    }

    .price-ipt {
        width: 71px;
        height: 35px;
        border: 1.5px solid #d8d8d8;
        border-radius: 5px;

        input {
            width: 100%;
            height: 100%;
            font-size: 16px;
            padding: 0 10px;
            border-radius: 5px;
        }
    }
} 


table{
    border-collapse: collapse; 
    border: none;  
    border-collapse: separate; border-spacing: 0px 10px;
}

td, th{
    border: none;   
    font-weight: 800;
}
.green {
    background-color: #39bf3e;
} 
.blue {
    background-color: rgb(20, 167, 225);
}
</style>
